<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<meta name="keywords" content="白菜编辑部">
<title>小白菜</title>
<style type="text/css">
.taboutter{
    width: 800px;
    margin: 0 auto;
    border: 1px solid #ccc;
}
.tabheader{
    width: 100%;
    padding: 0;
    margin: 0;
}
.tabheader ul{
    list-style: none;
    height: 50px;
    margin: 0;
    padding: 0;
}
.tabheader ul li{
    display: inline-block;
    width: 31%;
    text-align: center;
    margin: 0;
    padding: 0;
    height: 50px;
    line-height: 50px;
    background-color: #999;
}
.tabbody{
    margin-top: 50px;
    border-top: 1px solid #ccc;
}
</style>
</head>
<body>
    <div class="taborter">
        <div class="tabheader">
            <ul>
                <li>第一部分</li>
                <li>第二部分</li>
                <li>第三部分</li>
            </ul>
        </div>

        <div class="tabbody">
            <div class="tab">
                <p>111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p>
            </div>

            <div class="tab" style="display: none;">
                <p>252222222222252222222222252222222222252222222222252222222222252222222222252222222222252222222222252222222222252222222222252222222222252222222222252222222222252222222222252222222222252222222222252222222222252222222222252222222222252222222222252222222222252222222222252222222222252222222222</p>
            </div>

            <div class="tab" style="display: none;">
                <p>333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</p>
            </div>

        </div>
    </div>
    

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $('ul li').click(function(){
        var i=$(this).index();
        $('.tab').each(function(){
            var current=$(this).index();
            if (current==i){
                $(this).css('display','block')
            }else{
                $(this).css('display','none');
            }
        })
    })
</script>


</body>
</html>